import React, { Fragment } from 'react'
import './index.less'
import http from 'libs/http';
import Tabs from '../components/Tabs'
import { Pagination } from 'antd'
import SubscribeModal from './components/SubscribeModal'
import { MediaPlayer } from 'components'

export default class FreeClasses extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    queryData: {
      courseType: 0,
      pageIndex: 1,
      pageSize: 6,
      platformType: 0,
    },
    total: 0,
    freeClassesList: [],
    showModal: false,
    courseData: {}, // 当前点击的直播课预约数据
    showMediaModal: false,
    mediaUrl: '',
    mediaModalTitle: '',
  }

  componentDidMount() {
    this.uploadPlatformType(this.props)
  }

  componentWillReceiveProps(nextProps) {
    // this.setState(state => ({
    //   tabsData: [
    //     { courseType: 0, name: '全部课程', active: true },
    //     { courseType: 1, name: '龙英语', },
    //     { courseType: 3, name: '龙编程' },
    //   ],
    //   queryData: {
    //     ...state.queryData,
    //     courseType: 0,
    //     pageIndex: 1,
    //     pageSize: 6,
    //     platformType: 0,
    //   }
    // }), this.uploadPlatformType(nextProps))
    this.uploadPlatformType(nextProps)
  } 

  // 初始化或切换左侧menu时，获取路由参数
  // uploadPlatformType = (nextProps) => {
  //   const { platformType } = nextProps.match.params
  //   this.setState(state => ({
  //     queryData: {...state.queryData, platformType, pageIndex: 1 }
  //   }), this.getAuditionsList)
  // }
  uploadPlatformType = (nextProps) => {
    const { type } = nextProps.match.params
    if(type == 'pay'){
      this.setState(state => ({
        queryData: {...state.queryData, courseType: 3, pageIndex: 1 }
      }), this.getAuditionsList(type))
    }else if(type == 'public'){
      this.setState(state => ({
        queryData: {...state.queryData, pageIndex: 1 }
      }), this.getAuditionsList(type))
    }else{
      this.setState(state => ({
        queryData: {...state.queryData, pageIndex: 1 }
      }), this.getAuditionsList(type))
    }
  }
  // 获取课程列表
  getAuditionsList = (type) => {
    const { queryData } = this.state
    type = type || this.props.match.params.type;
    if(type == 'pay'){
      http.get('/student/pay-course/list', queryData).then(res => {
        const { total, list } = res.data
        const listLen = list.length
        if(listLen < 6) {
          list.length = 6
          list.fill({}, listLen, 6)
        }
        this.setState({
          total, freeClassesList: list
        })
      })
    }else if(type == 'public'){
      http.get('/student/open-course/list', queryData).then(res => {
        const { total, list } = res.data
        const listLen = list.length
        if(listLen < 6) {
          list.length = 6
          list.fill({}, listLen, 6)
        }
        this.setState({
          total, freeClassesList: list
        })
      })
    }else{
      http.get('/student/auditions/list', queryData).then(res => {
        const { total, list } = res.data
        const listLen = list.length
        if(listLen < 6) {
          list.length = 6
          list.fill({}, listLen, 6)
        }
        this.setState({
          total, freeClassesList: list
        })
      })
    }
    
  }

  // 获取免费试听课列表
  // getAuditionsList = () => {
  //   const { queryData } = this.state
  //   http.get('/student/auditions/list', queryData).then(res => {
  //     console.log(res)
  //     const { total, list } = res.data
  //     const listLen = list.length
  //     if(listLen < 6) {
  //       list.length = 6
  //       list.fill({}, listLen, 6)
  //     }
  //     this.setState({
  //       total, freeClassesList: list
  //     })
  //   })
  // }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState(state => ({
      tabsData, queryData: {...state.queryData, courseType, pageIndex: 1}
    }), this.getAuditionsList)
  }

  // 切换页码
  changePage = (page) => {
    this.setState(state => ({
      queryData: { ...state.queryData, pageIndex: page }
    }), this.getAuditionsList)
  }

  // 点击立即预约、免费播放
  handleClick = course => () => {
    const { platformType, courseId, courseName } = course
    // 直播课
    if(platformType === 2 ){
      this.setState({
        showModal: true,
        courseData: { courseId, courseName }
      })
    }
    // 录播课
    else if(platformType === 3) {
      const showErrorNotice = true
      http.get('/student/auditions/getRecording', { courseId }, {}, showErrorNotice).then(res => {
        this.setState({
          showMediaModal: true,
          mediaUrl: res.data,
          mediaModalTitle: courseName
        })
      })
    }
  }
  onCancel = () => {
    this.setState({
      showMediaModal: false,
      mediaUrl: '',
      mediaModalTitle: '',
    })
  }

  // 预约成功刷新页面
  handleSubscribe = () => {
    this.setState({ showModal: false }, this.getAuditionsList)
  }

  closeSubscribeModal = () => {
    this.setState({ showModal: false })
  }

  render() {
    const { tabsData, total, freeClassesList, showModal, courseData, mediaModalTitle, mediaUrl, showMediaModal } = this.state
    return (
      <Fragment>
        <Tabs tabsData={tabsData} changeTab={this.changeTab} />
        <div className="free-classes-content">
          {
            freeClassesList.map((item, i) => {
              const { platformType, status, pcPictureUrl, courseName } = item
              let btnStr = ''
              let handleDisable = true
              if(platformType === 3) {
                btnStr = '免费试听'
                handleDisable = false
              }else{
                switch(status) {
                  case 1: 
                    btnStr = '立即预约'
                    handleDisable = false
                    break;
                  case 2:
                    btnStr = '预约中'
                    break;
                  case 3:
                    btnStr = '不可预约'
                    break;
                  case 4:
                    btnStr = '已预约'
                    break;
                }
              }
              return (
                Object.keys(item).length > 0 ? (
                  <div key={i} className="free-classes-item">
                    <div className="img-wrap">
                      <img src={pcPictureUrl} />
                      <span className={platformType === 2 ? 'live-icon' : 'recorded-icon'}>{platformType===2 ? '直播' : '录播'}</span>
                    </div>
                    <p>{courseName}</p>
                    <span 
                      className={platformType===2 ? `status${status}` : ''}
                      onClick={handleDisable ? () => {} : this.handleClick(item) }
                    >{btnStr}</span>
                  </div>
                ) : <div key={i} className="free-classes-item"></div>
              )
            })
          }
        </div>
        
        <div className="pagination-container">
          <Pagination
            size="small"
            pageSize={6}
            total={total}
            showQuickJumper
            hideOnSinglePage={true}
            onChange={this.changePage}
          />
        </div>
        <SubscribeModal 
          showModal={showModal}
          closeSubscribeModal={this.closeSubscribeModal}
          handleSubscribe={this.handleSubscribe}
          courseData={courseData}
        />
        <MediaPlayer 
          showMediaModal={showMediaModal}
          src={mediaUrl}
          title={mediaModalTitle}
          onCancel={this.onCancel}
        />
      </Fragment>
    )
  }
}